import type { FormSchema } from '#/adapter/form';
import type { OnActionClickParams } from '#/adapter/vxe-table';
import type { AppApi } from '#/api/core/app';

import { h } from 'vue';

import { Delete, Edit, Eye } from '@vben/icons';

import { Tooltip } from 'ant-design-vue';

import { $t } from '#/locales';

/**
 * 表单结构定义
 */
export function useFormSchema(): FormSchema[] {
  return [
    {
      component: 'Input',
      componentProps: {
        maxlength: 50,
        placeholder: $t('placeholder.input'),
      },
      fieldName: 'name',
      label: $t('tableforge.app.name'),
      rules: 'required',
    },
    {
      component: 'Input',
      componentProps: {
        maxlength: 200,
        placeholder: $t('placeholder.input'),
      },
      fieldName: 'description',
      label: $t('tableforge.app.description'),
    },
    {
      component: 'Input',
      componentProps: {
        maxlength: 100,
        placeholder: $t('placeholder.input'),
      },
      fieldName: 'icon',
      label: $t('tableforge.app.icon'),
    },
    {
      component: 'InputNumber',
      componentProps: {
        min: 0,
        max: 9999,
        placeholder: $t('placeholder.input'),
      },
      defaultValue: 0,
      fieldName: 'displayOrder',
      label: $t('tableforge.app.displayOrder'),
    },
    {
      component: 'Input',
      componentProps: {
        disabled: true,
      },
      fieldName: 'spaceId',
      label: $t('tableforge.app.spaceId'),
      rules: 'required',
    },
  ];
}

/**
 * 表格搜索表单结构
 */
export function useGridFormSchema(): FormSchema[] {
  return [
    {
      component: 'Input',
      componentProps: {
        allowClear: true,
        maxlength: 50,
        placeholder: $t('placeholder.input'),
      },
      fieldName: 'name',
      label: $t('tableforge.app.name'),
    },
    {
      component: 'RangePicker',
      componentProps: {
        allowClear: true,
        style: 'width: 100%',
      },
      fieldName: 'createdTime',
      label: $t('column.createdTime'),
    },
  ];
}

/**
 * 表格列定义
 * @param onActionClick 操作列点击事件
 */
export function useColumns(onActionClick: (params: OnActionClickParams<AppApi.App>) => void) {
  return [
    { field: 'name', title: $t('tableforge.app.name') },
    { field: 'description', title: $t('tableforge.app.description') },
    { field: 'icon', title: $t('tableforge.app.icon') },
    { field: 'displayOrder', title: $t('tableforge.app.displayOrder') },
    { field: 'createdBy', title: $t('column.createdBy') },
    { field: 'createdTime', title: $t('column.createdTime') },
    {
      field: 'action',
      fixed: 'right',
      slots: {
        default: ({ row }: { row: AppApi.App }) => {
          return [
            h(
              Tooltip,
              { title: $t('action.view') },
              {
                default: () =>
                  h(Eye, {
                    class: 'cursor-pointer text-blue-600',
                    onClick: () => onActionClick({ code: 'view', row }),
                  }),
              },
            ),
            h(
              Tooltip,
              { title: $t('action.edit') },
              {
                default: () =>
                  h(Edit, {
                    class: 'cursor-pointer ml-2 text-blue-600',
                    onClick: () => onActionClick({ code: 'edit', row }),
                  }),
              },
            ),
            h(
              Tooltip,
              { title: $t('action.delete') },
              {
                default: () =>
                  h(Delete, {
                    class: 'cursor-pointer ml-2 text-red-600',
                    onClick: () => onActionClick({ code: 'delete', row }),
                  }),
              },
            ),
          ];
        },
      },
      title: $t('column.action'),
      width: 150,
    },
  ];
}
